function XiaoluSwiper(selector, imgList) {


    var swiperDiv = document.querySelector(selector);

    function createSwiperHtml(imgList) {
        var imgListDiv = document.createElement('div');
        var circleListDiv = document.createElement('div');
        imgListDiv.className = 'imgList';
        circleListDiv.className = 'circleList';
        imgList.forEach(function (item, i) {
            if (i == 0) {
                imgListDiv.innerHTML += '<div class="imgItem active" style="background-image: url(' + item + ');"></div>';
                circleListDiv.innerHTML += '<div class="circleItem active" id="c' + i + '"></div>';
            }
            else {
                imgListDiv.innerHTML += '<div class="imgItem" style="background-image: url(' + item + ');"></div>';
                circleListDiv.innerHTML += '<div class="circleItem" id="c' + i + '"></div>';
            }

        })
        swiperDiv.appendChild(imgListDiv);
        swiperDiv.appendChild(circleListDiv);
        swiperDiv.innerHTML += `<div class="btnList">
                 <div class="btn pre">‹</div>
                 <div class="btn next">›</div>
             </div>`;
    }
    createSwiperHtml(imgList);

    //需要全局用到的属性，需要放置到对象的属性上
    this.pre = document.querySelector(selector + ' .pre');
    this.next = document.querySelector(selector + ' .next');
    this.imgListDivs = document.querySelectorAll(selector + ' .imgItem');
    this.circle = document.querySelectorAll(selector + ' .circleItem');
    this.currentImg = 0;
    var that = this;

    //设置原型对象
    XiaoluSwiper.prototype.randomNum = function () {
        //初始化，将所有active删去
        this.imgListDivs.forEach(function (item, i) {
            item.classList.remove('active');
        })
        this.circle.forEach(function (item, i) {
            item.classList.remove('active');
        })
        //添加点击的元素为active
        this.imgListDivs[this.currentImg].classList.add('active');
        this.circle[this.currentImg].classList.add('active');
    }

    this.next.onclick = function () {
        that.back();

    }

    this.pre.onclick = function () {
        that.foword();

    }

    this.circle.forEach(function (item, i) {
        item.onclick = function () {
            that.go(i);
        }
    })
}

XiaoluSwiper.prototype.go = function (i) {
    this.currentImg = i;
    this.randomNum();
}

XiaoluSwiper.prototype.foword = function () {
    this.currentImg++;
    if (this.currentImg >= this.imgListDivs.length) {
        this.currentImg = 0;
    }
    this.randomNum();
}
XiaoluSwiper.prototype.back = function () {
    this.currentImg--;
    if (this.currentImg < 0) {
        this.currentImg = this.imgListDivs.length - 1;
    }
    this.randomNum();
}
